<template>
   <Sidebar ref="sidebar" :title="$t('message.xmindMap.shortcutKeys')">
    <div class="box">
      <div v-for="item in shortcutKeyList" :key="item.type">
        <div class="title">{{ item.type }}</div>
        <div class="list" v-for="item2 in item.list" :key="item2.value">
          <div class="item">
            <span
              v-if="item2.icon"
              class="icon xmind-iconfont"
              :class="[item2.icon]"
            ></span>
            <span class="name" :title="item2.name">{{ item2.name }}</span>
            <div class="value" :title="item2.value">{{ item2.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </Sidebar>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  nextTick,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
import Sidebar from "./Sidebar.vue";
import { shortcutKeyList } from "./config";
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  activeSidebar:String
})
const sidebar = ref()
watch(()=>props.activeSidebar,(val)=>{
  if (val === 'shortcutKey') {
    sidebar.value.show = true
  } else {
    sidebar.value.show = false
  }
})

onMounted(()=>{
  proxy.$eventBus.$on("showShortcutKey", () => {
    if(sidebar.value){
      sidebar.value.show = false;
      nextTick(() => {
        sidebar.value.show = true;
      });
    }
  });
})
</script>
<style lang="scss" scoped>
.box {
  padding: 0 20px;
  font-family: MiSans-Demibold;

  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 26px 0 20px;
  }

  .list {
    font-size: 14px;

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .icon {
        font-size: 16px;
        margin-right: 16px;
      }

      .name {
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .value {
        color: #909090;
        margin-left: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>